<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        .title {
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
            height: 50px;
            border: 1px solid rgb(190, 189, 189);
            display: flex;
            align-items: center;
            padding-left: 20px;
        }

        .main {
            height: 1px;
            transition: height .8s ease;
            width: 100%;
            overflow: hidden;
        }

        .root {
            background: linear-gradient(to right, #818285, #526294);
        }

        .child {

            border-bottom: none;
            margin: 10px 0px 0px 20px;
            background: linear-gradient(to right, #9adfd9, #d3dcd9);
        }

        .content {
            overflow: auto;
            height: 0px;
            display: none;
            border: 1px solid rgb(190, 189, 189);
            border-top: none;
            transition: height .8s ease;
            margin: 0px 0px 0px 20px;
        }

        .bodydiv {
            padding: 50px 100px;
        }

        body {
            overflow: hidden;
        }

        #draw {
            position: absolute;
            margin-left: 50%;
            background-color: white;
            width: calc(100% / 2);
            height: 100%;
            display: none;
            z-index: 10;
            transition: display .8s ease, width .8s ease;
            overflow: hidden;
        }

        #cover {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 9;
            display: none;
            background-color: rgba(231, 225, 225, 0.5);
        }

        .text {
            border: none;
            width: 100%;
            height: 100%;
            margin: 20px;
        }

        #des {
            border-bottom: 1px solid black;
            padding-right: 20px;
            margin-bottom: 20px;
        }

        .Autho {
            display: flex;
            align-items: center;
        }
    </style>
    <script>
        function objTo(obj) {
            var res = [];
            for (var key in obj) {
                res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
            }
            res.push("t=" + new Date().getDate())
            return res.join("&");
        }

        function ajax(type, url, timeout, obj, success, error) {

            var str = objTo(obj)

            /*  这里需要注意 对IE兼容的支持 */
            var xmlHttp, timer;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlHttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }


            if (type.toLowerCase() == "get" || type.toLowerCase() == "delete") {
                xmlHttp.open(type, url + "? " + str, true);
                if (document.getElementById('Authorization').value != '')
                    xmlHttp.setRequestHeader("Authorization", document.getElementById('Authorization').value);

                xmlHttp.send();
            } else if (type.toLowerCase() == "post" || type.toLowerCase() == "put") {
                //Post  提交
                xmlHttp.open(type, url, true);
                if (document.getElementById('Authorization').value != '')
                    xmlHttp.setRequestHeader("Authorization", document.getElementById('Authorization').value);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttp.send(str);
            }


            xmlHttp.onreadystatechange = function () {

                if (xmlHttp.readyState == 4) {
                    /* status 还有一个返回的状态 保证是正确的路径返回正确的值*/
                    if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
                        //链接成功也要中断请求
                        clearInterval(timer);
                        /* 5处理返回值 
                         responseText  获得字符串形式的响应数据。
                         responseXML 获得 XML 形式的响应数据。
                        */

                        success(xmlHttp.responseText)
                        //    alert(xmlHttp.responseText) ;
                    } else {
                        error(xmlHttp.responseText);
                        //请求失败
                    }
                }
            }
            //超时关闭 不然会让你一直在等待
            if (timeout) {
                timer = setInterval(function () {
                    //alert("中断请求");
                    xmlHttp.abort();
                    clearInterval(timer);
                }, timeout)
            }

        }
    </script>

</head>

<body>
    <div id="draw">
        <div class="text">

            <div id="des"></div>
            <textarea type="text" id="pram" style="width: 50%; height: 200px;"></textarea>
            <button onclick="ajaxreq()">测试</button>

            <div>
                <div>返回结果</div>
                <div>
                    <textarea type="text" id='result' style="width: 90%; height: 200px;"></textarea>
                </div>
            </div>
        </div>

    </div>
    <div id="cover" onclick="Draw(false)"></div>


    <div id="body" class="bodydiv">
        <h3>接口信息</h3>
        <div class="Autho">
            <span>设置Authorization:</span><textarea type="text" style="width: 50%; height:70px;"
                id="Authorization"></textarea>

        </div>

    </div>
    <!-- <div class="root title" id="1">
        root
    </div>
    <div class="main" id="1-main">
        <div class="child title" id="1-child">
            child
        </div>
        <div class="content" id="1-child-content">
            content
        </div>
    </div> -->
    <script>
        { { routetree } }

        let ajaxreq = () => {
            ajax(current_apiinfor.method, current_apiinfor.api.replace('//', '/'), 3000,
                {},
                function (xhr) {
                    var p = document.getElementById('result');
                    p.value = xhr;
                }, function (xhr) {
                    var p = document.getElementById('result');
                    p.value = xhr;
                })
        }
        let current_apiinfor = {
            api: '',
            method: ''
        }
        let Draw = (ifshow, content, api, method) => {
            if (ifshow) {
                document.getElementById('pram').value = ''
                document.getElementById('result').value = ''
                current_apiinfor.api = api
                current_apiinfor.method = method
                document.getElementById('des').innerHTML = content
                document.getElementById('draw').style.display = 'block';
                document.getElementById('cover').style.display = 'block';
            }
            else {
                document.getElementById('draw').style.display = 'none';
                document.getElementById('cover').style.display = 'none';
            }
        }
        // let routetree = [
        //     {
        //         path: '/',
        //         content: 'sdfsdfsdfsf',
        //         children: [
        //             {
        //                 path: "/login",
        //                 method: 'post'
        //             }
        //         ]
        //     },
        //     {
        //         path: '/user',
        //         content: 'sdfsdfsdfsf',
        //         children: [
        //             {
        //                 path: "/getinfor",
        //                 method: 'post'
        //             }
        //         ]
        //     }
        // ]
        let orgdiv = document.getElementById('body')
        for (let i = 0; i < routetree.length; i++) {
            let rootdiv = document.createElement('div');
            rootdiv.className = 'root title';
            rootdiv.id = i.toString();
            rootdiv.innerHTML = routetree[i].path + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + routetree[i].content
            let maindiv = document.createElement('div');
            maindiv.className = 'main';
            maindiv.id = i.toString() + '-main';


            if (routetree[i].children.length > 0) {
                for (let t = 0; t < routetree[i].children.length; t++) {
                    let childdiv = document.createElement('div');
                    childdiv.className = 'child title';
                    childdiv.id = i.toString() + '-' + t.toString() + '-child';
                    childdiv.api = routetree[i].path + routetree[i].children[t].path
                    childdiv.method = routetree[i].children[t].method
                    childdiv.innerText = routetree[i].children[t].path
                    let contentdiv = document.createElement('div');
                    contentdiv.className = 'content';
                    contentdiv.id = i.toString() + '-' + t.toString() + '-child-content';
                    contentdiv.innerHTML = routetree[i].children[t].content
                    maindiv.appendChild(childdiv)
                    childdiv.appendChild(contentdiv)
                }
            }
            orgdiv.appendChild(rootdiv)
            orgdiv.appendChild(maindiv)
        }
        let roots = document.getElementsByClassName('root')
        for (let r of roots) {
            r.addEventListener('click', (event) => {
                if (event.target.className.indexOf('show') < 0) {

                    event.target.className = event.target.className + ' show'
                    let re = Array.prototype.filter.call(
                        document.getElementById(event.target.id + '-main').childNodes,
                        (row) => (row.className == "child title"));
                    document.getElementById(event.target.id + '-main').style.height = (re.length * 70) + 'px';
                }
                else {
                    event.target.className = 'root title'
                    document.getElementById(event.target.id + '-main').style.height = '1px';
                }
            })
        }
        let children = document.getElementsByClassName('child')
        for (let r of children) {
            r.addEventListener('click', (event) => {
                console.log(event);
                Draw(true, event.srcElement.childNodes[1].innerHTML, event.target.api, event.target.method)
            })
        }
    </script>
</body>

</html>